<template>
    <div class="classic">
        <Nav>
            <div slot="left" @click="goBack"> &lt; </div>
            <div slot="center">我的-案例展示</div>
            <div slot="right" >···</div>
        </Nav>
        <Scroll class="content" 
        :probe-type='3' 
        :pull-upload="true" 
        ref="scroll"
        >
        <div class="main">
            <div class="add" @click="changeinput"> + </div>
            <input type="file" hidden  ref="fileinput" accept=".jpg, .jpeg, .png"  @change="shangchuan">
            <!-- 请求数据的接口 -->
            <classic-item v-for="item in classic" :key="item.id" :item_id="item.id" @handleDelete="getClassicImages"> <img :src="item.img" alt="" @load="onceRefresh"> </classic-item>
            <!-- 上传数据后展示的接口 -->
            <!-- <classic-item v-for="(item,index) in url" :key="index"> <img :src="item" alt="" @load="onceRefresh"> </classic-item> -->
            
        </div>
        </Scroll>
    </div>
</template>

<script>
import Nav from '@/components/common/Nav.vue';
import ClassicItem from './ClassicItem.vue';
import Scroll from '@/components/common/scroll/Scroll.vue';
import {noopenidrequest,upload_images} from '@/network/request.js';
import {debounce} from '@/components/common/common.js';
    export default {
        data() {
            return {
                // 请求数据的url存储
                classic: [],
                refresh:null,
                fileinput:null,

                // 上传图片后返回的url
                url:[]
            }
        },
        components: {
            Nav,
            ClassicItem,
            Scroll
        },
        created () {
            this.getClassicImages()
            
        },
        mounted () {
            this.refresh = debounce(this.$refs.scroll.refresh,50);
            this.fileinput = this.$refs.fileinput
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            
            // 请求数据的接口
            async getClassicImages(){
                try {
                    const res = await noopenidrequest({
                    url:'api/user/classic'
                    })
                    this.classic = res.data.data.classic
                    this.classic.forEach((item,index)=>{
                        item.img = item.img.replace("http://kf.laigl.com/upload/","")
                    })
                    // console.log(res.data.data.classic);
                } catch (error) {
                    console.log(error);
                }
            },

            changeinput(){
                // 点击div触发input
                console.log(this.fileinput);
                this.fileinput.click()

            },
            shangchuan(){
                // 上传后预览图片方法一

                // const file = this.fileinput.files[0]
                // const imageurl = URL.createObjectURL(file);

                // 上传后预览图片方法二
                const file = this.fileinput.files[0]
                console.log(file.size);
                if(file.size/1024/1024 >2){
                    alert("图片太大了,请重新上传图片")
                }else{
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.addEventListener('load', async()=>{
                    // 获取图片base64地址
                    const imageurl = reader.result;

                    try {
                        const res = await noopenidrequest({
                        url:'api/user/classicimg',
                        data:{
                            'img':imageurl
                        }
                        })

                        //上传成功后进行刷新
                        if(res.data.code ===2000){
                            console.log("上传图片成功");
                            this.url.push(imageurl)
                        }
                        this.getClassicImages()
                        // console.log(this.classic);
                        // console.log(res);
                    } catch (error) {
                        console.log(error);
                    }
                    
                }, false);
                }
            },

            onceRefresh(){
                console.log("调用刷新");
                this.refresh()
            }
        },
    }
</script>

<style  scoped>
.classic{
    height: 100vh;
}
.content{
    height: calc(100% - 108px);
}
.main{
    width: 323px;
    margin: 108px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.add{
    border: 1px dashed #151837;
    width: 98px;
    height: 98px;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    line-height: 98px;
}
/* .add img{
    width: 75px;
    height: 75px;
    vertical-align: middle;
    transform: rotate(45deg);
} */
</style>